﻿@{
    ViewBag.Title = "Index";

}
<style>
    .formTable {
        width: 100%;
    }
</style>

<h2>Create Your Own Book</h2>

<div id="editor">
    <form action='/someServerSideHandler'>
        <fieldset id="dynamicForm">
            <legend>Book Details</legend>
            <table class="formTable">
                <tr>
                    <td>Enter Book Name</td>
                    <td>
                        <input style="font-size: 10px;" type="text" id="txtBook" data-bind='value: Name' />
                    </td>
                </tr>
            </table>
            <table style="width: 100%" data-bind='visible: Chapters().length > 0'>
                <thead>
                    <tr>
                        <th>NAME</th>
                        <th>TEXT</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind='foreach: Chapters'>
                    <tr>
                        <td style="width: 80%; padding-bottom: 10px; border-bottom: 1px solid #ababab">                     
                            <div >
                                <input type="hidden" data-bind='value: ID, uniqueName: true' />
                               Chapter Title:  <input style="width: 80%; font-size: 10px; height: 20px;" class='required' data-bind='value: Name' />
                            </div>
                            <div style="display:none">
                                <textarea rows="2" cols="40" style="width: 80%; font-size: 10px;" data-bind="value: Text"> </textarea>
                            </div>
                        </td>
                        <td style="margin-left: 20px;"><a href='#' data-bind='click: $root.removeChapter'>Delete</a> <br />
                        </td>
                    </tr>
                </tbody>
            </table>

            <button data-bind='click: addChapter'>Add Chapter</button>
            <button data-bind='click: save, enable: Chapters().length > 0' type='submit'>Submit</button>

        </fieldset>
    </form>
</div>
@section masterscripts
{
    <div class="bookSection">
        @Html.Partial("_BookChapters")
    </div>
}

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            // Activate jQuery Validation
            $("form").validate({ submitHandler: ui.mModel.save });
        });
        $("#editor").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                var placeHolder = $(this).find("#dynamicForm");
                var objectType = ui.draggable.attr("viewType");
                if (objectType == "index") {
                    $("<p></p>").text(ui.draggable.text() + ui.draggable.tagName).appendTo(placeHolder);
                }
                else {
                    window.self.location.href = "/Book/" + objectType + "/" + ui.draggable.text();
                }
            }
        });
    </script>

    <script type="text/javascript">

        function UI(ajaxLayer) {
            var dal = ajaxLayer;
            function Article(id, name, text) {
                var self = this;
                self.ID = ko.observable(id);
                self.ChapterID = ko.observable();
                self.Name = ko.observable(name);
                self.Text = ko.observable(text);
                self.Url = ko.observable("/Book/Article/" + name);
            }
            function Chapter(id, name, text) {
                var self = this;
                self.ID = ko.observable(id);
                self.BookID = ko.observable();
                self.Name = ko.observable(name);
                self.Text = ko.observable(text);
                self.Active = ko.observable(true);
                self.Url = ko.observable("/Book/Chapter/" + name);
                self.Articles = ko.observableArray();
                self.addArticle = function (title, content) {
                    var n = "article " + self.Articles.length;
                    var art = { ID: "100", Name: ko.observable(title), Text: ko.observable(content) };
                    self.Articles.push(art);
                };
                self.removeArticle = function (art) {
                    self.Articles.remove(art);
                };
                self.addArticle("Preface", "I am here");
            }

            var BookModel = function (chapters) {
                var self = this;
                self.ID = ko.observable();
                self.TitleUrl = ko.observable("htpp://www.somedomain.com/pic/image.jpg");
                self.Name = ko.observable("Untitled Book");
                self.Chapters = ko.observableArray(chapters);
                self.addChapter = function () {
                    var n = self.Chapters().length;
                    var chap = new Chapter(eval(102 + n), "Chapter " + eval(n + 1), "no data");
                    self.Chapters.push(chap);
                };
                self.removeChapter = function (chapter) {
                    self.Chapters.remove(chapter);
                };
                self.hideChapter = function (chapter) {
                    chapter.Active = ko.observable(false);
                };
                self.save = function (form) {
                    var text = ko.toJSON(self);
                    //var text2 = ko.toJSON(self);
                    //  var w = window.open("about:blank");
                    //  w.document.writeln(text);
                    dal.SaveBook(text);
                };
            };

            this.mModel = new BookModel([
               new Chapter("1", "Chapter 1", "one")
            ]);
            this.DataBind = function () {
                ko.applyBindings(this.mModel);
            };
        }
       
    </script>
    <script type="text/javascript">

        function DAL() {
            var self = this;
            self.SaveBook = function (book) {
              //  alert(book);
                $.ajax(
                    {
                        url: "/Book/Save",
                        data:  book  ,
                        cache: false,
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json, charset=utf-8',
                        success: function (data) {
                            alert(data);
                        },
                        error: function (xhr, textStatus, err) {
                            alert(err);
                        }
                    });
            };
        }
        
        var proxy = new DAL();
        var ui = new UI(proxy);
        ui.DataBind();
    </script>
}
